<template>
  <div class="main">
    <router-view v-slot="{ Component, route }">
      <transition name="slide-fade">
        <keep-alive :include="keepNameLsit">
          <component :is="Component" v-if="isRouterShow" :key="route.fullPath" />
        </keep-alive>
      </transition>
    </router-view>
  </div>
</template>

<script setup lang="ts">
import { useKeepAliveStore } from '@/stores';
import { storeToRefs } from 'pinia';
import { nextTick, ref, watch } from 'vue';
import { useAppStore } from '@/stores';

const appStore = useAppStore()
const isRouterShow = ref(true);
const KeepAliveStore = useKeepAliveStore()

const { keepNameLsit } = storeToRefs(KeepAliveStore)
watch(() => appStore.isRouterShow, () => {
  isRouterShow.value = false
  nextTick(() => {
    isRouterShow.value = true
  })
})



</script>

<style lang="scss" scoped>
/*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>
